<template>
    <el-container direction="vertical">
        <el-row>
            <el-col :span="24">
                <h1>日志管理&nbsp;>&nbsp;日志列表</h1>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                <el-form-item label="登录名:">
                    <el-input v-model="queryParam.loginName" placeholder="请输入登录名" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="操作类型:">
                    <el-select v-model="queryParam.type" placeholder="请选择操作类型">
                        <el-option
                        v-for="item in opertionTypes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="操作日期:">
                    <el-date-picker
                        v-model="queryParam.startDate"
                        type="date"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        placeholder="开始日期">
                    </el-date-picker>
                    至
                    <el-date-picker
                        v-model="queryParam.endDate"
                        type="date"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        placeholder="结束日期">
                        </el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-row justify="end">
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="default" @click="clear">重置</el-button>
                </el-row>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
            </el-col>
        </el-row>      
        <el-table :data="view.list"
            tooltip-effect="dark"
            style="width:100%">
            <el-table-column
                label="用户名"
                width="250"
                prop="loginName">
            </el-table-column>
            <el-table-column
                label="操作结果"
                width="150"
                prop="type"
                :formatter="dictType">
            </el-table-column>
            <el-table-column
                label="操作内容"
                width="200"
                prop="requestUri">
            </el-table-column>
            <el-table-column
                label="操作者IP"
                width="200"
                prop="remoteAddr">
            </el-table-column>
            <el-table-column
                label="操作时间"
                width="200"
                prop="createDate"
                :formatter="yyyyMMddHHmmss">
            </el-table-column>
            <el-table-column
                label="操作">
                <template #default="scope">
                    <el-button v-if="scope.row.type=='2'" @click="popupErrMsg(scope.row)" type="default">
                        查看异常
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background
            v-model:page-size="view.pageInfo.pageSize"
            layout="prev, pager, next"
            :current-page="view.pageInfo.current" 
            @current-change="currentChange"
            :pageCount="view.pageInfo.total%view.pageInfo.pageSize==0 ? view.pageInfo.total/view.pageInfo.pageSize : Math.floor(view.pageInfo.total/view.pageInfo.pageSize)+1" />
    </el-container>

    
    <el-dialog
        v-model="popupVisible"
        title="出错信息"
        width="800">
        <el-input readonly="true" rows="16" v-model="popupContent" type="textarea" />
        <span slot="footer" class="dialog-footer">
            <el-button @click="popupVisible = false">取 消</el-button>
        </span>
    </el-dialog>
</template>

<script>
import dayjs from 'dayjs';
export default{
    beforeMount(){
        this.axios.post("/backend/admin/dict/type","type=LOG_TYPE").then((r)=>{
            if(r.status === 200){
                this.opertionTypes = r.data.data
            }
        })
    },
    mounted(){
        this.search()
    },
    data(){
        return {
            queryParam:{
                loginName:"",
                type:"",
                startDate:"",
                endDate:"",
                pageInfo:{
                    current:1,
                    pageSize:10
                },
                order:{
                    columnName:"",
                    sortValue:""
                }
            },
            opertionTypes:[],
            popupVisible:false,
            popupContent:"",
            view:{
                list:[],
                pageInfo:{}
            }
        }
    },
    methods:{
        search:function(){
            this.queryParam.pageInfo.current=1
            this.query()
        },
        query:function(){
            this.axios.post("/backend/admin/log/paging",this.queryParam).then((r)=>{
                if(r.status == 200){
                    this.view = r.data.data
                    this.queryParam.pageInfo=r.data.data.pageInfo
                }
            })
        },
        clear:function(){
            this.queryParam = {
                type:"",
                pageInfo:{
                    current:1,
                    pageSize:10
                },
                order:{
                    columnName:"",
                    sortValue:""
                }
            }
            this.search();
        },
        currentChange:function(value){
            this.queryParam.pageInfo.current = value
            this.query()
        },
        popupErrMsg:function(item){
            console.log("Variable [item] -> " + item)
            this.axios.get("/backend/admin/log/item/" + item.id).then((r)=>{
                if(r.status == 200){
                    this.popupContent = r.data.data.exception
                    this.popupVisible = true
                    console.log("Variable [popupContent] -> " + this.popupContent)
                    console.log("Variable [popupVisible] -> " + this.popupVisible)
                }
            })
            return true;
        },
        dictType: function(row, column, cellValue){
            console.log(this.opertionTypes)
            let result = cellValue;
            this.opertionTypes.forEach(item => {
                if(cellValue === item.value){
                    result= item.label
                    return false;
                }
            });
            return result;
        },
        yyyyMMddHHmmss: function(row, column, cellValue){
            return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : ''
        }
    }
}
</script>